<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>课程安排表</title>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet"/>
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet"/>

    <div th:include="common/common.html :: commonheader"></div>

</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div th:replace="common/common.html :: #leftmenu"></div>
    <!-- left side end-->

    <!-- main content start-->
    <div class="main-content">

        <!-- header section start-->
        <div th:replace="common/common.html :: headermenu"></div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                学生管理
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">学籍管理系统</a>
                </li>
                <li>
                    <a href="#">课程管理</a>
                </li>
                <li class="active">课程安排</li>
            </ul>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <header class="panel-heading">
                        课程安排表
                    </header>
                    <div class="panel-body">
                        <div class="adv-table">
                            <!-- 添加按钮 -->
                            <button id="course_arrange_add" type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#course_arrange_add_modal">
                                添加记录
                            </button>
                            <button class="btn btn-danger" id="course_arrange_delete_all" th:pn="${page.pages}">批量删除
                            </button>
                            <table class="display table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th style="text-align: center" width="20px">
                                        <input type="checkbox" id="check_all"/>
                                    </th>
                                    <th style="text-align: center">学期</th>
                                    <th style="text-align: center">课程名称</th>
                                    <th style="text-align: center">班级</th>
                                    <th style="text-align: center">授课老师</th>
                                    <th style="text-align: center">发布时间</th>
                                    <th style="text-align: center">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="schedule,stat:${schedules}">
                                    <td style="text-align: center"><input type='checkbox' class='check_item'/></td>
                                    <td style="text-align: center"
                                        th:text="${schedule.getSTerm() == 1 ? '上学期':'下学期'}"
                                        th:sTerm="${schedule.getSTerm()}"></td>
                                    <td style="text-align: center" th:text="${schedule.getCName()}"
                                        th:sId="${schedule.getSId()}"></td>
                                    <td style="text-align: center" th:text="${schedule.getClassName()}"></td>
                                    <td style="text-align: center" th:text="${schedule.getTName()}"></td>
                                    <td style="text-align: center"
                                        th:text="${#dates.format(schedule?.getSDate(),'yyyy')}"></td>
                                    <td style="text-align: center;" class="center hidden-phone">
                                        <button type="button" class="btn btn-info update_btn"
                                                data-target="#course_arrange_update_modal"
                                                data-toggle="modal">修改
                                        </button>
                                        <a id="delete_btn"
                                           th:href="@{/deleteSchedule/{sId}(sId=${schedule?.getSId()},pn=${page.current})}"
                                           class="btn btn-danger">删除</a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div class="row-fluid">
                                <div class="dataTables_info">
                                    当前第[[${page.current}]]页,
                                    共[[${page.pages}]]页,
                                    共[[${page.total}]]条数据
                                </div>
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <!-- 上一页 -->
                                        <li th:if="${page.current > 1}" th:class="prev"><a
                                                th:href="@{'/course_table?pn='+ ${page.current - 1}}">上一页</a></li>
                                        <li th:if="${page.current <= 1}" th:class="disabled"><span>上一页</span></li>
                                        <!-- 不足5页 -->
                                        <li th:if="${page.pages <= 5}"
                                            th:class="${page.current == num ? 'active':''}"
                                            th:each="num : ${#numbers.sequence(1,page.pages)}">
                                            <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                            <a th:if="${page.current != num}"
                                               th:href="@{'/course_table?pn='+${num}}">[[${num}]]</a>
                                        </li>
                                        <!-- 够5页 -->
                                        <div th:if="${page.pages > 5}">
                                            <!-- 前5页 -->
                                            <li th:if="${page.current < 3}"
                                                th:class="${page.current == num ? 'active':''}"
                                                th:each="num : ${#numbers.sequence(1,5)}">
                                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                <a th:if="${page.current != num}"
                                                   th:href="@{'/course_table?pn='+${num}}">[[${num}]]</a>
                                            </li>
                                            <!-- 中间页码 -->
                                            <li th:if="${page.current >= page.pages - 2 and page.current <= page.pages}"
                                                th:class="${page.current == num ? 'active':''}"
                                                th:each="num : ${#numbers.sequence(page.pages - 4,page.pages)}">
                                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                <a th:if="${page.current != num}"
                                                   th:href="@{'/course_table?pn='+${num}}">[[${num}]]</a>
                                            </li>
                                            <!-- 最后5页 -->
                                            <li th:if="${page.current > 2 and page.current < page.pages - 2}"
                                                th:class="${page.current == num ? 'active':''}"
                                                th:each="num : ${#numbers.sequence((page.current)-2,(page.current)+2)}">
                                                <a th:if="${page.current == num}" href="#">[[${num}]]</a>
                                                <a th:if="${page.current != num}"
                                                   th:href="@{'/course_table?pn='+${num}}">[[${num}]]</a>
                                            </li>
                                        </div>
                                        <!-- 下一页 -->
                                        <li th:if="${page.current < page.pages}" th:class="next"><a
                                                th:href="@{'/course_table?pn='+ ${page.current + 1}}">下一页</a></li>
                                        <li th:if="${page.current >= page.pages}" th:class="disabled">
                                            <span>下一页</span>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <div th:replace="common/common.html :: footer"></div>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 添加模态框 -->
<div class="modal fade" id="course_arrange_add_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="course_arrange_add_modal_close" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">课程安排添加</h4>
            </div>

            <div class="modal-body">
                <form id="course_arrange_add_form" class="form-horizontal" th:action="@{/course_arrange}" method="post">

                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*学期</label>
                        <div class="col-sm-10">
                            <select name="sTerm">
                                <option name="sTerm1" value="1">上学期</option>
                                <option name="sTerm2" value="2">下学期</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*课程名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_add_form" placeholder="课程名称" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="className_from_add"
                               class="col-sm-2 control-label">*班级</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="className_from_add"
                                   name="className"
                                   placeholder="班级" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.current}">
                    </div>

                    <div class="form-group">
                        <label for="tName_from_add"
                               class="col-sm-2 control-label">*授课老师</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tName_from_add"
                                   name="tName"
                                   placeholder="授课老师" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="sTeacher_from_add"
                               class="col-sm-2 control-label">*老师工号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="sTeacher_from_add"
                                   name="sTeacher"
                                   placeholder="授课老师工号" required="required">
                        </div>
                    </div>


                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="course_arrange_add_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="course_arrange_add_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 修改模态框 -->
<div class="modal fade" id="course_arrange_update_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="course_arrange_update_modal_close" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1">课程安排添加</h4>
            </div>

            <div class="modal-body">
                <form id="course_arrange_update_form" class="form-horizontal" th:action="@{/updateSchedule}"
                      method="post">
                    <input type="hidden" name="_method" value="PUT">
                    <input id="sId_update_form" type="hidden" name="sId">
                    <div class="form-group">
                        <label for="cName_add_form"
                               class="col-sm-2 control-label">*学期</label>
                        <div class="col-sm-10">
                            <select name="sTerm">
                                <option id="sTerm1" name="sTerm1" value="1">上学期</option>
                                <option id="sTerm2" name="sTerm2" value="2">下学期</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="cName_update_form"
                               class="col-sm-2 control-label">*课程名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="cName"
                                   id="cName_update_form" placeholder="课程名称" required="required">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="className_update_from"
                               class="col-sm-2 control-label">*班级</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="className_update_from"
                                   name="className"
                                   placeholder="班级" required="required">
                        </div>
                        <input type="hidden" name="pn" th:value="${page.pages}">
                    </div>

                    <div class="form-group">
                        <label for="tName_from_update"
                               class="col-sm-2 control-label">*授课老师</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="tName_from_update"
                                   name="tName"
                                   placeholder="班级" required="required">
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="course_arrange_update_cancel" class="btn btn-default"
                        data-dismiss="modal">取消
                </button>
                <button type="button" id="course_arrange_update_enter" class="btn btn-primary">确认
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--dynamic table-->
<script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
<!--dynamic table initialization -->
<script src="js/dynamic_table_init.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
    $(function () {

        // 点击 添加按钮
        $("#course_arrange_add_enter").click(function () {
            let sName = $("#cName_add_form").val().trim();
            let className = $("#className_from_add").val().trim();
            let tName = $("#tName_from_add").val().trim();
            let sTeacher = $("#sTeacher_from_add").val().trim();
            if (sName === "" || className === "" || tName === "" || sTeacher === "") {
                alert("请确保*号信息都填写")
                return false;
            }
            document.getElementById("course_arrange_add_form").submit();
        });

        // 取消添加
        $("#course_arrange_add_cancel").click(function () {
            $("#course_arrange_add_form")[0].reset();
        });

        // 取消修改
        $("#course_arrange_update_cancel").click(function () {
            $("#course_arrange_update_form")[0].reset();
        });

        // 关闭添加 模态框
        $("#course_arrange_add_modal_close").click(function () {
            $("#course_arrange_add_form")[0].reset();
        });

        // 关闭 修改 模态框
        $("#course_arrange_update_modal_close").click(function () {
            $("#course_arrange_update_form")[0].reset();
        });

        // 点击修改按钮
        $(document).on("click", ".update_btn", function () {
            // 获取 按钮所在行的 course信息
            let sId = $(this).parents("tr").find("td:eq(2)").attr("sId");
            let sTerm = $(this).parents("tr").find("td:eq(1)").attr("sTerm");
            let cName = $(this).parents("tr").find("td:eq(2)").text();
            let className = $(this).parents("tr").find("td:eq(3)").text();
            let tName = $(this).parents("tr").find("td:eq(4)").text();

            // 将 course 信息 添加到 修改 模态框中
            if (sTerm !== 1) {
                $("#sTerm1").prop("selected", "selected")
            } else {
                $("#sTerm2").prop("selected", "selected")
            }
            $("#cName_update_form").val(cName);
            $("#className_update_from").val(className);
            $("#tName_from_update").val(tName);
            $("#sId_update_form").val(sId);
        });

        // 点击确定修改按钮
        $("#course_arrange_update_enter").click(function () {
            $("#course_arrange_update_form").submit();
        });

        // 全选按钮
        $("#check_all").click(function () {
            let checked = $(this).prop("checked");
            $(".check_item").prop("checked", checked);
        });

        // 实现批量删除
        $("#course_arrange_delete_all").click(function () {
            let cNames = "";
            let sIds = "";

            $.each($(".check_item:checked"), function () {
                cNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
                sIds += $(this).parents("tr").find("td:eq(2)").attr("sId") + "-";
            });
            cNames = cNames.substring(0, cNames.length - 1);
            sIds = sIds.substring(0, sIds.length - 1);
            if (confirm("你确定要删除【" + cNames + "】吗?")) {
                // 发送 Ajax请求 批量删除
                let pn = $("#course_arrange_delete_all").attr("pn");
                $.ajax({
                    url: "/deleteSchedule/" + sIds + "?pn=" + pn,
                    type: "GET",
                    success: function () {
                        location.reload();
                    }
                });
            }


        });

        // 全选 按钮 和 单个 按钮的关系
        $(document).on("click", ".check_item", function () {
            let len = $(".check_item:checked").length;
            let flag = len === $(".check_item").length;
            $("#check_all").prop("checked", flag);
        });

    });
</script>

</body>
</html>
